<template>
	<view class="scroll-container">
		<u-navbar title="手动匹配" :background="navbarBg" title-color="#fff" :border-bottom="false"  back-icon-color="#fff"></u-navbar>
		<view class="fixed">
			<view class="search-box">
				<u-search placeholder="请输入搜索关键字" shape="square" :animation="true" v-model="keyword" :action-style="actionStyle" bg-color="#fff" @custom="refresh"></u-search>
			</view>
		</view>
		<u-dropdown @open="dropdown" ref="uDropdown">
			<u-dropdown-item v-model="chooseDate" :title="chooseDate ? chooseDate :'请选择过磅日期'"></u-dropdown-item>
		</u-dropdown>
		
		<u-picker mode="time" v-model="chooseDateShow" :params="params" @confirm="confirmDate"></u-picker>
		
		<mescroll-uni ref="mescrollRef" :top="top" :bottom="80" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="car-list">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<u-checkbox v-model="item.checked" shape="circle" @change="checkboxChange($event,index)"></u-checkbox>
					<view class="item-body">
						<view class="item-hd">
							<text class="number">{{item.plateNumber}}</text>
						</view>
						<view class="item-bd">
							<view class="bd-l">
								<view>
									<text class="label">过磅重量：</text>
									<text class="value">{{item.weightData}}t</text>
								</view>
								<view>
									<text class="label">过磅时间：</text>
									<text class="value">{{item.weightTime}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="status" :class="item.weightType == 1 ? 'warning' : 'success'">{{item.weightType == 1 ? '进磅' : '出磅'}}</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="op-box">
			<view class="btn-box">
				<view class="btn" @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import moment from 'moment'
	import config from '@/common/config.js'
	export default{
		mixins:[MescrollMixin],
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				top:0,
				chooseDateShow:false,
				chooseDate:'',
				createTime:{
					createTimeStart:'',
					createTimeEnd:'',
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				keyword:'',
				dataList:[],
				upOption:{
					empty:{
						tip:"~暂无数据~"
					}
				},
				form:{
					entryId:null,
					outerId:null,
					id:null
				}
			}
		},
		onLoad(option){
			this.top = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(314) + 'px' 
			this.form.id = option.id
		},
		methods:{
			dropdown(e){
				if(e == 0){
					this.chooseDateShow = true
				}
			},
			confirmDate(e){
				this.chooseDate = `${e.year}年${e.month}月${e.day}日`
				let createTime = {
					createTimeStart:`${e.year}-${e.month}-${e.day}` + ' 00:00:00',
					createTimeEnd:`${e.year}-${e.month}-${e.day}` + ' 59:59:59',
				}
				this.createTime = this.$u.deepClone(createTime)
				this.$refs.uDropdown.close();
				this.refresh()
			},
			refresh(){
				this.$nextTick(()=>{
					this.dataList = [];
					this.mescroll.resetUpScroll()
				})
			},
			upCallback(page) {
				this.$u.api.getWeightList({current:page.num,size:page.size,keyword:this.keyword,createTimeStart:this.createTime.createTimeStart,createTimeEnd:this.createTime.createTimeEnd,matchFlag:0}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					let curPageData = res.data ? res.data.records : [];
					let curPageLen = curPageData.length; 
					curPageData.map(item => {
						item.checked = false
					})
					let totalSize = res.data.total;
					if(page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			checkboxChange(e,index){
				if(e.value){
					let item = this.dataList[index]
					if(item.weightType == 1) this.form.entryId = item.id
					if(item.weightType == 2) this.form.outerId = item.id
					this.dataList.map(v => {
						if(v.weightType == item.weightType) v.checked = false
					})
				}
				this.$set(this.dataList[index],'checked',e.value)
			},
			submit(){
				if(!this.form.entryId || !this.form.outerId) this.$u.toast('请选择进磅车辆及出磅车辆')
				this.$u.api.match(this.form).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					uni.showModal({
						content:'订单匹配成功',
						success: () => {
							uni.navigateBack()
						}
					})
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseDate{
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: #fff;
		text{
			font-size: 30rpx;
			margin-right: 10rpx;
		}
	}
	.scroll-container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		.swiper-container{
			flex: 1;
		}
	}
	
	.search-box{
		padding: 32rpx 30rpx;
		background: linear-gradient(180deg, #0082FF 0%, rgba(0, 130, 255, 0.9) 36%, rgba(0, 130, 255, 0.57) 74%, rgba(0, 130, 255, 0) 100%);
		.search{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			color: #A7ADB3;
			.icon-search{
				margin-right: 6rpx;
			}
			span{
				font-size: 28rpx;
			}
		}
	}
	.car-list{
		
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding:20rpx;
			position: relative;
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
		.item-body{
			flex: 1;
		}
		.item-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6rpx;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.startTime{
				font-size: 26rpx;
				color: #666D7F;
			}
		}
		.item-bd{
			display: flex;
			align-items: center;
			.bd-l{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				view{margin-top: 12rpx;}
				.label{
					color: #666D7F;
				}
				.value{
					font-size: 30rpx;
					margin-right: 30rpx;
				}
			}
			.bd-r{
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(148deg, #FCA726 0%, #FF6E28 100%);
				border-radius: 100%;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
	.op-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:16rpx 30rpx 0;
		padding-bottom:calc(10rpx + env(safe-area-inset-bottom)); 
		box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.15);
		z-index: 99;
		.btn-box{
			display: flex;
			align-items: center;
			width: 100%;
			.all{
				font-size: 28rpx;
				color: #28282C;
				text{
					color: #1378FF;
				}
			}
			.btn{
				height: 80rpx;
				background: linear-gradient(133deg, #12A6FF 0%, #1378FF 100%);
				border-radius: 44rpx;
				line-height: 80rpx;
				font-size: 34rpx;
				color: #fff;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>
